<template>
  <div class="login-body">
    <!-- 登录页面的logo -->
    <!-- <img src="https://i.loli.net/2018/11/01/5bda9ddd540b7.png" alt="logo"> -->
    <p>换相开关式三相不平衡治理装置</p>
    <x-input title="账号：" v-model="account" @on-enter="login" style="font-size:18px;"></x-input>
    <x-input title="密码：" v-model="password" type="password" @on-enter="login" style="font-size:18px;"></x-input>
    <x-button type="primary"  @click.native="login">登录</x-button>
    <toast v-model="showToast" type="cancel" text="账号或密码错误！"></toast>
  </div>  
</template>

<script>
import { XInput, XButton,Toast } from "vux";
import Http from "./../unit/http.js";

export default {
  components: {
    XInput,
    XButton,
    Toast
  },
  data() {
    return {   
      account: "",
      password: "",

      showToast:false,
    };
  },
  mounted() {},
  methods: {

    login() {
      //用Crypto-js加密password，后面再传输
    
      const CryptoJS = require("crypto-js");
      const AES = require("crypto-js/aes");
      //定义密钥
      const aesKey = "yitaikeji@#$&*,.";
      const aesIv = "RandomInitVector";
      //加密过程
      function aesCBC(text) {
        let aesText = text;
        const key = CryptoJS.enc.Utf8.parse(aesKey);
        const iv = CryptoJS.enc.Utf8.parse(aesIv);
        aesText = CryptoJS.AES.encrypt(text, key, {
          iv: iv,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7
        }).toString();
        return aesText;
      }
      const self = this;
      const encode = encodeURI(aesCBC(self.password)); //最终加密结果

      const param = {
        account: self.account,
        password: encode
      };
      const url = "/yitai/admin/user/auth";
      const success = function(response) {
        console.log(response.data)
        const status = response.data.status;
        if(status == 200){
          const name = response.data.info.account
          const token = response.data.info.token
          const role = response.data.info.role
          sessionStorage.setItem("sessionData", name);
          sessionStorage.setItem("token", token);
          sessionStorage.setItem("role", role);
          self.$router.push({ path: "/substation" })
        }else if(status == 500){
          self.showToast = true;
        }
        
      };
      const failed = function() {
        
      };
      Http.http(url, param, success, failed);
    }
    
  }
};
</script>


<style scoped >
button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}

.weui-cell:before {
  height: 0;
  border-top: none;
}

.weui-cell {
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  margin: 5px 0;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.login-body {
  width: 300px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}
.login-body img {
  width: 100%;
  height: 100%;
}
.login-body p {
  margin-bottom: 65px;
  font-size: 18px;
  color: #034b7a;
}
.login-body input {
  width: 100%;
}
.login-body button {
  width: 100%;
  height: 50px;
  margin-top: 35px;
}
</style>